<template>
  <!-- 编辑邮箱 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="邮箱" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index" style="border-bottom:none">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='email'" label="" prop="email" >
              <el-input v-model="formParams.email" type="text" placeholder="请输入邮箱" clearable/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='host'" label="" prop="host" >
              <el-input v-model="formParams.host" type="text" placeholder="请输入邮件服务器地址" clearable/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='port'" label="" prop="port" >
              <el-input-number :min="1" :max="999999999" :precision="0" v-model="formParams.port" controls-position="right" clearable placeholder="请输入端口号"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='user_name'" label="" prop="user_name" >
              <el-input v-model="formParams.user_name" type="text" placeholder="请输入用户名" clearable/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='password'" label="" prop="password" >
              <el-input v-model="formParams.password" type="text" placeholder="请输入密码" clearable/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='tls'" label="" prop="tls" >
              <el-radio-group v-model="formParams.tls">
                <el-radio-button :label="1">认证</el-radio-button>
                <el-radio-button :label="0">不认证</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='isClose'" label="" prop="isClose" >
              <el-radio-group v-model="formParams.isClose">
                <el-radio-button :label="0">开启</el-radio-button>
                <el-radio-button :label="1">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addEmail,
  editEmail
} from "@/api/config";

export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '邮箱', key: 'email' ,pass:true},
        { label: '邮件服务器地址', key: 'host' ,pass:true},
        { label: '端口号', key: 'port' ,pass:true},
        { label: '用户名', key: 'user_name' ,pass:true},
        { label: '密码', key: 'password' ,pass:true},
        { label: '是否开启tls认证', key: 'tls' },
        { label: '是否关闭', key: 'isClose' },
      ],
      formParams: {
        email: '', //邮箱
        host: '', //邮件服务器地址
        port: '', //端口号
        user_name: '', //用户名
        password: '', //密码
        tls: 1, //是否开启tls认证1或者0
        isClose: 0 //是否关闭 1是关闭
      },
      ruleForm: {
        email: [{ required: true, trigger: 'blur', message: '请输入邮箱', }],
        host: [{ required: true, trigger: 'blur', message: '请输入邮件服务器地址', }],
        port: [{ required: true, trigger: 'blur', message: '请输入端口号', }],
        user_name: [{ required: true, trigger: 'blur', message: '请输入用户名', }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          email: '', //邮箱
          host: '', //邮件服务器地址
          port: '', //端口号
          user_name: '', //用户名
          password: '', //密码
          tls: 1, //是否开启tls认证1或者0
          isClose: 0 //是否关闭 1是关闭
        }
      }
    },
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,
      params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params.id) {
            addEmail(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editEmail(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
</style>
